<template>
	<view class="page">
		<image src="/static/img/mouse.png" class="goods"></image>
		<view class="goods-info">
			<text class="goods-name">商品名称尚欧品的恢复待分拣康东方商品名称尚欧品的恢复待分拣康东方</text>
			<view class="share">
				<image src="/static/img/goods-share%20.png"></image>
				<text>分享</text>
			</view>
			<text class="tag tag-one">标签标签</text>
			<text class="tag tag-two">标签标签</text>
			<text class="price">¥388.12~588.13</text>
			<text class="high-price">原价：699.12</text>
			<text class="sell-count">销量：3453件</text>
			<text class="send">快递包邮</text>
		</view>
		<view class="goods-param">
			<text class="param">商品参数</text>
			<view class="line"></view>
			<text  class="weight"><text style="background:rgba(255,226,176,1);border-radius:50%;">规</text>格：24斤</text>
			<text  class="brand"><text style="background:rgba(255,226,176,1);border-radius:50%;">品</text>牌：乱七八糟</text>
			<text  class="from"><text style="background:rgba(255,226,176,1);border-radius:50%;">产</text>地：云南大理</text>
			<text class="select">点击查看 </text>
			<image src="/static/img/right-arrow.png" class="right-arrow"></image>
		</view>
		<view class="goods-size">
			<text class="left">商品规格</text>
			<view class="right" @click="selectGoods">
				<text>请选择商品规格</text>
				<image src="/static/img/right-arrow.png"></image>
			</view>
		</view>
		<view class="goods-detail-wrap">
			<view class="goods-top">
				<image src="/static/img/bubble.png"></image>
				<text class="detail-content">商 · 品 · 详 · 情</text>
				<view class="goods-img">
						<image src="/static/img/mouse-one.png"></image>
						<image src="/static/img/mouse-two.png"></image>
						<text class="no-more">没有更多了</text>
				</view>
			</view>
		</view>
		<view class="price-show">
			<text>价格说明</text></br></br>
			<text>价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格 说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明。</text>
		</view>
		<view class="bottom">
			<text class="total-price">¥ 388.32</text>
			<view class="add-cart">
				<text>加入购物车</text>
			</view>
			<view class="buy">
				<text>立即购买</text>
			</view>
		</view>
		<goods-size v-if="isSelect"></goods-size>
	</view>
</template>

<script>
	import GoodsSize from '@/components/GoodsSize';
	export default {
		data() {
			return {
				isSelect: false
			}
		},
		methods: {
			selectGoods() {
				this.isSelect = !this.isSelect;
				
			}
		},
		components: {
			GoodsSize
		}
	}
</script>

<style>
	.page {
		width: 100%;
		height: 100%;
	}
	.goods {
		width: 750rpx;
		height: 750rpx;
	}
	.goods-info {
		position: relative;
		width: 710rpx;
		height: 250rpx;
		margin-left: 20rpx;
		overflow: hidden;
		background: rgba(255,255,255,1);
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(204,204,204,1);
		border-radius: 10rpx;
		margin-top: -30rpx;
	}
	.goods-name {
		margin-left: 30rpx;
		margin-top: 31rpx;
		width: 383rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51,51,51,1);
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
	.share {
		position: absolute;
		right: 24rpx;
		top: 25rpx;
		width: 85rpx;
		height: 49rpx;
	}
	.share image {
		width: 100%;
		height: 100%;
	}
	.share text {
		position: absolute;
		top: 4rpx;
		left: 15rpx;
		height: 26rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255,255,255,1);
	}
	.tag {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 108rpx;
		height: 28rpx;
		background: rgba(222,245,255,1);
		border: 1rpx solid rgba(185,233,255,1);
		border-radius: 8rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(72,180,231,1);
	}
	.tag-one {
		position: absolute;
		top: 133rpx;
		left: 41rpx;
	}
	.tag-two {
		position: absolute;
		left: 173rpx;
		top: 133rpx;
	}
	.price {
		position: absolute;
		left: 31rpx;
		top: 170rpx;
		width: 233rpx;
		height: 23rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(254,177,71,1);
	}
	.high-price {
		position: absolute;
		left: 40rpx;
		bottom: 20rpx;
		width: 136rpx;
		height: 21rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(153,153,153,1);
		text-decoration: line-through;
	}
	.sell-count {
		position: absolute;
		right: 29rpx;
		bottom: 67rpx;
		width: 152rpx;
		height: 23rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51,51,51,1);
	}
	.send {
		position: absolute;
		right: 35rpx;
		bottom: 25rpx;
		width: 86rpx;
		height: 22rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(153,153,153,1);
	}
	.goods-param {
		position: relative;
		width: 710rpx;
		height: 194rpx;
		margin-left: 20rpx;
	}
	.param {
		position: absolute;
		left: 39rpx;
		top: 43rpx;
		width: 29rpx;
		height: 118rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51,51,51,1);
		line-height: 30rpx;
	}
	.line {
		position: absolute;
		left: 97rpx;
		top: 40rpx;
		height: 124rpx;
		width: 2rpx;
		background: rgba(102,102,102,1);
		border-radius: 1rpx;
	}
	.weight {
		position: absolute;
		left: 153rpx;
		top: 43rpx;
		width: 143rpx;
		height: 26rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(102,102,102,1);
	}
	.brand {
		position: absolute;
		left: 153rpx;
		top: 86rpx;
		width: 193rpx;
		height: 26rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(102,102,102,1);
	}
	.from {
		position: absolute;
		left: 153rpx;
		top: 134rpx;
		width: 208rpx;
		height: 27rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(102,102,102,1);
	}
	.select {
		position: absolute;
		right: 63rpx;
		bottom: 30rpx;
		width: 113rpx;
		height: 29rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		text-decoration: underline;
		color: rgba(254,177,71,1);
	}
	.right-arrow {
		position: absolute;
		right: 30rpx;
		bottom: 25rpx;
		width: 14rpx;
		height: 26rpx;
	}
	.goods-size {
		position: relative;
		width: 690rpx;
		height: 70rpx;
		line-height: 70rpx;
		background: rgba(255,252,249,1);
		border: 1rpx solid rgba(253,149,47,1);
		border-radius: 10rpx;
		margin-left: 25rpx;
		margin-top: 32rpx;
	}
	.goods-size .left {
		text-align: center;
		display: block;
		width: 176rpx;
		height: 100%;
		background: rgba(254,177,71,1);
		border-radius: 10rpx 0 0 10rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255,255,255,1);
	}
	.goods-size .right {
		width: 514rpx;
		height: 100%;
	}
	.goods-size .right text {
		position: absolute;
		top: 0;
		left: 197rpx;
		width: 195rpx;
		height: 27rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color:rgba(204,204,204,1);
	}
	.goods-size .right image {
		position: absolute;
		right: 30rpx;
		bottom: 22rpx;
		width: 14rpx;
		height: 26rpx;
	}
	.goods-detail-wrap {
		width: 710rpx;
		height: 1104rpx;
		margin-left: 20rpx;
		margin-top: 32rpx;
	}
	.goods-top {
		position: relative;
		width: 690rpx;
		height: 108rpx;
		margin-left: 10rpx;
		margin-top: 10rpx;
	}
	.goods-top image {
		width: 100%;
		height: 100%;
	}
	.detail-content {
		position: absolute;
		top: 28rpx;
		left: 202rpx;
		height: 37rpx;
		font-size: 38rpx;
		font-family: FandolHei;
		font-weight: bold;
		color: rgba(254,177,71,1);
	}
	.goods-img {
		width: 670rpx;
		height: 400rpx;
	}
	.goods-img image {
		width: 100%;
		height: 100%;
		margin-left: 10rpx;
		margin-top: 30rpx;
	}
	.no-more {
		display: block;
		width: 100%;
		height: 28rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(153,153,153,1);
		margin: 30rpx 280rpx;
	}
	.price-show {
		width: 647rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(179,179,179,1);
		margin-left: 51rpx;
	}
	.bottom {
		position: relative;
		width: 750rpx;
		height: 100rpx;
		background: rgba(255,255,255,1);
		margin-top: 120rpx;
		box-shadow: 0rpx -4rpx 8rpx 0rpx rgba(230,230,230,0.74);
		overflow: hidden;
		margin-bottom: 50rpx;
	}
	.total-price {
		display: block;
		width: 136rpx;
		height: 26rpx;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255,77,77,1);
		line-height: 36rpx;
		margin-left: 28rpx;
		margin-top: 37rpx;
	}
	.add-cart {
		position: absolute;
		top: 15rpx;
		left: 340rpx;
		width: 190rpx;
		height: 65rpx;
		line-height: 65rpx;
		border: 2rpx solid rgba(254,177,71,1);
		border-radius: 35rpx 0rpx 0rpx 35rpx;
	}
	.add-cart text {
		position: absolute;
		left: 22rpx;
		width: 147rpx;
		height: 29rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(254,177,71,1);
	}
	.buy {
		position: absolute;
		top: 15rpx;
		left: 530rpx;
		width: 190rpx;
		height: 70rpx;
		line-height: 70rpx;
		background: rgba(253,149,47,1);
		border-radius: 0rpx 35rpx 35rpx 0rpx;
	}
	.buy text {
		position: absolute;
		width: 118rpx;
		height: 28rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255,238,238,1);
		margin-left: 36rpx;
	}
</style>

